<template>
    <div class="container" @click="goDetail">
        <div class="head">
            <img :src="data.avatar">
            <span>{{data.date}}</span>
        </div>
        <div class="title">{{data.title}}</div>
        <img :src="data.imgSrc" class="bigImg">
        <div class="content">{{data.content}}</div>
        <div class="end">
            <img src="../../../assets/images/icon/chat1.png" class="icon">
            <span>{{data.collection}}</span>
            <img src="../../../assets/images/icon/view.png" class="icon">
            <span>{{data.reading}}</span>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            data:{
                type:Object
            }
        },
        methods:{
            goDetail(){
                this.$router.push(`/readdetail?id=${this.data.postId}`);
            }
        }
    }
</script>

<style lang="less" scoped>
    .container{
        margin-top: 20px;
        background: #fff;
        padding: 10px;
    }
    .head{
        display: flex;
        align-items: center;
        height: 40px;
        img{
            width: 25px;
            height: 25px;
        };
        span{
            font-size: 14px;
            margin-left: 20px;
            color: #666;
        }
    }
    .bg{
        width: 100%;
        height: 200px;
    }
    .icon{
        width: 15px;
        height: 15px
    }
    .content{
        font-size: 17px;
        color: #666;
    }
    .title{
        padding: 10px 0;
        font-size: 20px;
        font-weight: bold;
        color: #333;
        line-height: 30px;
    }
    .end{
        font-size: 14px;
        display: flex;
        align-items: center;
        height: 25px;
        color: #666;
        span{
            margin: 0 10px;
        }
    }
    .bigImg{
        width: 100%;
    }
</style>